import { BasicModal } from "@/components/Antd";
import { useCallbackState } from "@/utils/hook";
import { Input } from "antd";
import { forwardRef, useImperativeHandle, useState } from "react";
const Modal = (props: any, ref: any) => {
  console.log(props)
  const [open, setOpen] = useCallbackState(false);
  const [title, setTitle] = useState("");
  const [handleType, setHandleType] = useState("");
  const [content, setContent] = useState("");
  const [formModal, setFormModal] = useState({
    id: undefined,
    status: undefined,
    reason: undefined,
  });
  const openModal = (type: any, record?: any) => {
    console.log("openModal", record);
    setOpen(true);
    setHandleType(type);
    setFormModal({
      ...formModal,
      id: record.id,
      status: record.status,
      reason: undefined,
    });
    console.log("openModal", type, record);

    switch (type) {
      case "delete":
        setTitle("删除");
        setContent(`确定删除ID为“${record.id}”数据项吗？`);
        break;
      case "disabled":
        setTitle(record.status === 0 ? "启用" : "禁用");
        setContent(
          record.status === 0
            ? `确定启用ID为“${record.id}”数据项吗？`
            : `确定禁用ID为“${record.id}”数据项吗？`
        );
        break;
    }
  };
  const handleOk = () => {
    console.log("handleOk", formModal);
    setOpen(false);
  };
  const handleCancel = () => {
    setOpen(false);
  };
  useImperativeHandle(ref, () => ({
    openModal,
  }));
  const onChange = ({ target: { value } }: any) => {
    console.log("TextArea:", value);
    setFormModal({ ...formModal, reason: value });
  };

  return (
    <>
      <BasicModal
        title={title}
        open={open}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>{content}</p>
        {handleType === "disabled" && formModal.status === 1 && (
          <Input.TextArea
            showCount
            maxLength={100}
            value={formModal.reason}
            onChange={onChange}
            placeholder="请输入禁用原因"
            style={{ height: 120, resize: "none" }}
          />
        )}
      </BasicModal>
    </>
  );
};

export default forwardRef(Modal);
